<template>
    <div class="chart">
        <Echart :config="config" with="500px" height="240px" refName="zhexian" ref="zxt"></Echart>
    </div>
</template>

<script>
import Echart from "@/common/index.vue"
import { option } from "@/components/bottomCenter/index.js"
import { getLocalWeekData } from "@/mockData/localjianceData"
export default {
    components: {
        Echart
    },
    data() {
        return {
            config: null,
            localWeekData: getLocalWeekData(),
            index: 0,
            instance: null,
            time: null
        }
    },
    created() { },
    mounted() {
        this.getEchartInstance()
        this.config = option()
        this.handlerInit()
        this.handlerEvent()
        this.handlerTime()
    },
    methods: {
        handlerUpdate() {
            let dateLength = this.localWeekData.length
            this.config.title.text = this.localWeekData[this.index].name
            this.config.series[0].data = this.localWeekData[this.index].value
            this.index++
            if (this.index >= dateLength) {
                this.index = 0
            }

        },
        handlerInit() {
            this.config.title.text = this.localWeekData[this.index].name
            this.config.series[0].data = this.localWeekData[this.index].value
        },
        getEchartInstance() {
            this.instance = this.$refs.zxt.getData()
        },
        handlerEvent() {
            this.instance.on("mouseover", () => {
                clearInterval(this.time)
            })
            this.instance.on("mouseout", () => {
                this.handlerTime()
            })
        },
        handlerTime() {
            this.time = setInterval(() => {
                this.handlerUpdate()
            }, 3500)
        }
    }
}
</script>

<style scoped lang="less">
.chart {
    width: 100%;
    height: 100%;
}
</style>
